<template>
    <el-card class="box-card">
        <div slot="header" class="clearfix">
            <span>考勤异常维护申请</span>
            
            <!-- <el-button style="float: right;margin-right:15px;margin-left:0" type="primary" @click="nextList">保存</el-button> -->
            <el-button style="float: right;margin-right:15px" type="primary" @click="refresh">刷新</el-button>
        </div>
    <!-- 用户信息表 -->
        <div class="app-container">
            <el-table
                :data="tableData"
                style="width: 100%">
                <el-table-column
                prop="id"
                v-if="false"
                label="异常编号"
                sortable
                width="140"
               
                >
                <!-- {{scope.$row}} -->
                </el-table-column>
                <el-table-column
                label="序号"
                type="index"
                align="center"
                sortable
                width="100"
               
                >
                </el-table-column>
                <!-- <el-table-column
                prop="realName"
                label="姓名"
                width="110">
                </el-table-column> -->
                <el-table-column
                prop="exceptionTime"
                label="异常时间"
                >
                </el-table-column>
                <el-table-column
                prop="checkState"
                label="异常状态"
                width="140"
                
                filter-placement="bottom-end">
                
                <template slot-scope="scope">
                    <el-tag
                    :type="scope.row.checkState === '待维护' ? 'primary' : 'danger'"
                    disable-transitions>{{scope.row.checkState}}</el-tag>
                    <!-- <el-tag
                    :type="scope.row.checkState === '待维护' ? 'primary' : 'success'"
                    disable-transitions>{{scope.row.checkState}}</el-tag> -->
                </template>
                </el-table-column>
                <el-table-column
                prop="exceptionType"
                label="异常类型"
                width="140"
                
                filter-placement="bottom-end">
                <template slot-scope="scope">
                    <el-tag
                    type="warning"
                    disable-transitions>{{scope.row.exceptionType}}</el-tag>
                </template>
                </el-table-column>
                <el-table-column class-name="status-col" label="操作" width="160" align="center">
                    <template slot-scope="scope">
                        <!-- <el-dropdown @command="handleCommand"> -->
                        <el-button type="primary" @click="dialogFormVisible = true , setInfo(scope.row)"  :disabled="scope.row.disable">
                          维护申请
                            <!-- <i class="el-icon-arrow-down el-icon--right"></i> -->
                        </el-button>
                        <!-- <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item  :command="composeValue(item[0],scope.$index)" >领导</el-dropdown-item>
                            <el-dropdown-item :command="composeValue(item[1],scope.$index)">上级领导</el-dropdown-item>
                            <el-dropdown-item :command="composeValue(item[2],scope.$index)">员工</el-dropdown-item>
                            
                        </el-dropdown-menu> -->
                        <!-- </el-dropdown> -->
                    </template>
                    
                </el-table-column>
            </el-table>
        </div>

        <div class="popForm">
          <el-dialog title="填写详细信息" :visible.sync="dialogFormVisible" center>
          
            <div class="form-info">
            <el-form ref="form" :model="form" label-width="80px" >
            
            <el-form-item label="标题" prop="name">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <!-- <el-form-item label="异常类型">
                <el-select v-model="sizeForm.region" placeholder="请选择异常类型">
                <el-option label="迟到" value="shanghai"></el-option>
                <el-option label="早退" value="beijing"></el-option>
                </el-select>
            </el-form-item> -->
            <el-form-item label="审批人:" prop="leader">
              <el-select v-model="form.leader" placeholder="请选择责任上级进行审批">
                <el-option v-for="(item,index) in leaderMap" :key="index" :label="item.realName" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
           
            <el-form-item label="原因描述" prop="desc">
                <el-input type="textarea" v-model="form.desc"></el-input>
            </el-form-item>
            <el-form-item size="large" >
                <el-button type="primary" @click="onSubmit(),resetForm('form')" style="margin-left:23%">提交申请表</el-button>
                <el-button @click="resetForm('form')">重置</el-button>
                <!-- <el-button  type="primary" @click="onSubmit">重置</el-button> -->
            </el-form-item>
            </el-form>
        </div>
          
          </el-dialog>
        </div>
    </el-card>
    
    
</template>

<script>
import qs from "qs";
export default {
  data() {
    return {
      
      list:[],
      row:"",
      listLoading: false,
      dialogFormVisible: false,
      form: {
        name: "",
        leader:"",
        desc: "",
        type:"",
        reason:"",
        date1:"",
        date2:""
      },
      leaderMap:[],
      tableData:[
        
      ],
      formInline: {
        user: "",
        region: ""
      },
      formLabelWidth: "120px"
    };
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger"
      };
      return statusMap[status];
    }
  },
  computed:{
    unusualMsg (){
      let a = this.tableData.checkState
      if(a == 0){
        a = "待维护"
      }
      return a
    }
  },
  created() {

    //获取考勤信息列表
   this.$axios
      .post(
        "http://localhost:8088/getMaintenance",
        qs.stringify({
        }),
        {
          headers: {
            "Content-Type": "application/x-www-form-urlencoded"
          }
        }
      )
      .then(res => {
        console.log(res)
        console.log(res.data.data);
       

        this.tableData = res.data.data
        for (let i in this.tableData) {
          this.tableData[i].exceptionTime = this.tableData[i].exceptionTime.substr(0,10)   // 对异常时间做格式处理
          switch(this.tableData[i].checkState){   //状态的显示转化
              case 0:
                this.tableData[i].checkState = "待维护";
                break;
              case 1:
                this.tableData[i].checkState = "审批中";
                this.tableData[i].disable = true
                // this.disable = true
                break;
              case 2:
                this.tableData[i].checkState = "已同意";
                this.tableData[i].disable = true
                break;
              case 3:
                this.tableData[i].checkState = "已拒绝";
                this.tableData[i].disable = true
                break;
            }
        }
      })

      //获取领导信息列表
      this.$axios
      .post("http://localhost:8088/getAllLeaders", qs.stringify({}), {
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        }
      })
      .then(res => {
        console.log(res.data.data);
        this.leaderMap = res.data.data
        let a =  res.data.data
        
        for (let i in a){
          let obj = {}
          this.$set(obj,"realName",a[i].realName)
          this.$set(obj,"id",a[i].id)
          this.leaderMap.push(obj)
        }
      })
      .catch(err => {
        console.log(err);
      });
  },
  methods: {
    addUser() {},
    filterTag (){},
    formatter (){},
    setInfo ($row){
      // console.log($row)
      this.row = $row.id
    },
    refresh (){
      this.$axios
        .post(
          "http://localhost:8088/getMaintenance",
          qs.stringify({
            // date: this.date
            userId: "1",
          }),
          {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded"
            }
          }
        )
        .then(res => {
          console.log(res.data.data);
          this.tableData = res.data.data
          for (let i in this.tableData) {
            switch(this.tableData[i].checkState){
              case 0:
                this.tableData[i].checkState = "待维护";
                break;
              case 1:
                this.tableData[i].checkState = "审批中";
                this.tableData[i].disable = true
                break;
              case 2:
                this.tableData[i].checkState = "已同意";
                this.tableData[i].disable = true
                break;
              case 3:
                this.tableData[i].checkState = "已拒绝";
                this.tableData[i].disable = true
                break;
            }
            
          }
        })
    },
    resetForm(formName) {
        this.$refs[formName].resetFields();
        console.log(1)
    },
    onSubmit() {
      console.log(this.tableData);
      this.$axios
      .post(
        "http://localhost:8088/maintenanceReq",
        qs.stringify({
          // date: this.date
          maintenanceReason: this.form.desc,
          recordId: 2,//this.tableData.recordId
          checkUserId: 3,
          id: this.row, //this.tableData.id
          checkState: "1"
        }),
        {
          headers: {
            "Content-Type": "application/x-www-form-urlencoded"
          }
        }
      )
      .then(res => {
        console.log(res.data);
        this.$notify({
            title: '成功',
            message: res.data.message,
            type: 'success'
          });
        this.dialogFormVisible = false
        this.resetForm('form')
        this.$axios
        .post(
          "http://localhost:8088/getMaintenance",
          qs.stringify({
          }),
          {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded"
            }
          }
        )
        .then(res => {
          console.log(res.data.data);
          this.tableData = res.data.data
          for (let i in this.tableData) {
            switch(this.tableData[i].checkState){
              case 0:
                this.tableData[i].checkState = "待维护";
                break;
              case 1:
                this.tableData[i].checkState = "审批中";
                this.tableData[i].disable = true
                break;
              case 2:
                this.tableData[i].checkState = "已同意";
                this.tableData[i].disable = true
                break;
              case 3:
                this.tableData[i].checkState = "已拒绝";
                this.tableData[i].disable = true
                break;
            }
            
          }
        })
      })
      .catch(err => {
        console.log(err);
      });
    },
    
    nextList() {
      console.log("next");
    }
  }
};
</script>


<style lang="scss" scoped>
.text {
  font-size: 20px;
}
.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
.clearfix {
  span {
    font-size: 20px;
    line-height: 40px;
  }
}
.box-card {
  margin: 20px;
  
}
.app-container {
  padding: 0;
}
.form-info {
  .el-col-2 {
    width: 0.7%;
  }
}


</style>
